<template>
	<view class="main_box">
		<!-- REGISTER字样 -->
		<view class="title">
			REGISTER
		</view>
		<!-- 注册表单 -->
		<view class="login_box">
			<uni-forms ref="registerRef" :rules="rules" :model="registerForm">
				<uni-forms-item name="username">
					<uni-easyinput v-model="registerForm.username" placeholder="请输入账户"
						@blur="validateField('username')" />
				</uni-forms-item>
				<view style="height: 30px;"></view>
				<uni-forms-item name="password">
					<uni-easyinput v-model="registerForm.password" type="password" placeholder="请输入密码"
						@blur="validateField('password')" />
				</uni-forms-item>
				<view style="height: 30px;"></view>
				<uni-forms-item name="confirmPassword">
					<uni-easyinput v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码"
						@blur="handlePasswordConfirmation" />
				</uni-forms-item>
				<view style="height: 30px;"></view>
			</uni-forms>
			<button type="default" class="custom_button" @click="clickRegister">注册</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 注册输入的表单
				registerForm: {
					username: "",
					password: "",
					confirmPassword: '',
				},
				showPopup: false,
				popupMessage: "",
				popupPosition: "top",
				popupStyle: "background-color: #333; color: #fff; padding: 5px 10px; border-radius: 5px;",
				// 注册表单校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: "账号不能为空",
							pattern: /^.{6,12}$/, // 账号长度在6~12之间
							trigger: "blur", // 失去焦点时触发校验
						}, ],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "密码不能为空",
							pattern: /^[a-zA-Z0-9]{6,18}$/, // 密码只能包含字母和数字，长度在6~18之间
							trigger: "blur", // 失去焦点时触发校验
						}, ],
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: "请确认密码",
							trigger: "blur",
						}, ],
					},
				},

			};
		},
		methods: {
			handlePasswordConfirmation() {
				// 自定义的回调函数，在这里进行密码确认逻辑
				if (this.registerForm.confirmPassword !== this.registerForm.password) {
					console.log("确认密码与密码不一致");
					// 执行其他逻辑处理，例如提示用户密码不一致等
					alert("确认密码与密码不一致,请重新输入");
					// 刷新页面
					window.location.reload();
					// 取消后续事件的执行
					return;
				} else {
					console.log("确认密码与密码一致");
					// 执行其他逻辑处理，例如隐藏提示信息等
				}
			},
			// 点击注册
			clickRegister() {
				// 校验请求参数，发送注册请求
				this.$refs.registerRef.validate().then((res) => {
					// 表单校验通过，执行注册逻辑
					console.log("注册成功！");
					// 在这里执行注册逻辑，如发送注册请求等
					uni.navigateTo({
						url: './login',
					});
					// 注册成功后，跳转到其他页面，这里可以使用uni.navigateTo或uni.switchTab等跳转方式
				}).catch((err) => {
					// 表单校验未通过，输出错误信息
					console.log("表单错误信息：", err);
				});
			},
			// 手动触发指定字段的校验
			validateField(fieldName) {
				this.$refs.registerRef.validateField(fieldName);
			},
		},

	};
</script>
<style scoped lang="scss">
	/*页面主体内容*/
	.main_box {
		height: 100vh;
		width: 100vw;
		background: url(../../static/background.jpg);
		background-size: cover;
	}
	.title {
		font-size: 140upx;
		color: aquamarine;
		position: relative;
		top: 250upx;
		text-align: center;
	}
	/*注册表单*/
	.login_box {
		position: relative;
		top: 450upx;
		margin: 0 40upx;
	}
	.custom_button {
		background-color: #55aa00;
		color: #ffffff;
		width: 100%;
		border-radius: 40px;
	}
	/*忘记密码*/
	.forget {
		color: #55aa00;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
	}
	/*没有账号注册*/
	.register-section {
		position: absolute;
		font-size: 35upx;
		bottom: 0upx;
		width: 100%;
		color: #505050;
		text-align: center;
	}
</style>